/**
 * 富文本
 */
(function (vue, $, name) {
  vue.component(name, {
    template: '<textarea class="tinymce-textarea" :id="id" :action="action"></textarea>',
    name: 'tinymce',
    props: {
      busNo: String,
      action: String,
      value: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: true
      },
      id: String,
      toolbar: {
        type: Array,
        default: function () {
          return [
            'removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code',
            'bold italic blockquote | h2 p | image media link | alignleft aligncenter alignright | table'
          ];
        }
      },
      menubar: {
        default: ''
      },
      height: {
        type: Number,
        required: false,
        default: 360
      }
    },
    data: function () {
      return {
        hasChange: false,
        hasInit: false,
        change: false,
        // 保存上传文件对象
        filedata: [],
        // 富文本编辑前内容(保存删除内容前的内容)
        content: ''
      };
    },
    methods: {
      init: function () {
        var _this = this;
        window.tinymce.init({
          selector: 'textarea#' + _this.id,
          height: _this.height,
          body_class: 'panel-body',
          object_resizing: false,
          toolbar: _this.toolbar,
          menubar: _this.menubar,
          language: 'zh_CN',
          plugins:
            'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount,image,imagetools,table',
          end_container_on_empty_block: true,
          powerpaste_word_import: 'clean',
          code_dialog_height: 450,
          code_dialog_width: 1000,
          advlist_bullet_styles: 'square',
          advlist_number_styles: 'default',
          block_formats: _this.$t('widgets.EITinymceX_msg_005') + '=p;' + _this.$t('widgets.EITinymceX_msg_003') + '=h2;',
          imagetools_cors_hosts: [
            'wpimg.wallstcn.com',
            'wallstreetcn.com'
          ],
          media_live_embeds: true,
          imagetools_toolbar: 'watermark',
          default_link_target: '_blank',
          link_title: false,
          // images_upload_url: _this.action,
          image_title: true,
          file_picker_types: 'file image media',
          //   audio_template_callback: function(data) {
          //     return '<audio controls>' + '\n<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + '</audio>';
          //   },
          //   video_template_callback: function(data) {
          //     return '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') + '</video>';
          //   },
          images_upload_handler: function (blobInfo, success, failure) {
            var formData;
            var xhr = null;
            if (window.XMLHttpRequest) {
              xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
              xhr = new ActiveXObject('Microsoft.XMLHTTP');
            } else {
              yufp.$message(this.$t('widgets.EITinymceX_msg_001'), this.$t('widgets.msg_title'));
              return;
            }
            xhr.withCredentials = false;
            xhr.timeout = 200000;
            var url = yufp.service.getUrl({ url: backend.gatewayService + backend.fileService + _this.action });
            xhr.open('POST', url);
            xhr.setRequestHeader('Authorization', 'Bearer ' + yufp.service.getToken());
            xhr.setRequestHeader('busNo', _this.busNo);
            xhr.onload = function () {
              var json;

              if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
              }

              json = JSON.parse(xhr.responseText);
              var file = {};
              var filePath = json.data.filePath;
              var fileId = json.data.fileId;
              file.fileId = fileId;
              file.filePath = filePath;
              _this.filedata.push(file);
              if (!json || typeof filePath != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
              }
              var path = yufp.service.getUrl({ url: backend.gatewayService + backend.fileService + '/api/file/provider/download?fileId=' + json.data.filePath });
              path = yufp.util.addTokenInfo(path);
              success(path);
            };

            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            formData.append('busNo', _this.busNo);
            xhr.send(formData);
          },
          file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('id', 'tinymceUpload');
            //          input.click();
            // input.setAttribute("accept", "image/*");
            document.body.appendChild(input);
            document.getElementById('tinymceUpload').click();
            input.onchange = function () {
              var file = this.files[0];
              var reader = new FileReader();
              reader.onload = function () {
                var id = 'blobid' + new Date().getTime();
                var blobCache =
                  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);
                // call the callback and populate the Title field with the file name
                cb(blobInfo.blobUri(), { title: file.name });
              };
              reader.readAsDataURL(file);
              document.body.removeChild(input);
            };
          },
          init_instance_callback: function (editor) {
            if (_this.value !== undefined) {
              editor.setContent(_this.value);
            }
            _this.hasInit = true;
            editor.on('Change KeyUp', function (event) {
              _this.hasChange = true;
              _this.$emit('input', editor.getContent({ format: 'raw' }));
              _this.content = editor.getContent({ format: 'raw' });
            });
            editor.on('KeyDown', function (event) {
              if (event.keyCode == '08') {
                // 匹配img标签
                var imgReg = /<img.*?(?:>|\/>)/gi;
                // 匹配src属性
                var srcReg = /src=['"]?([^'"]*)['"]?/i;
                var img = _this.content.match(imgReg);
                if (img !== null) {
                  var imgArr = [];
                  var removeImg = [];
                  var curImg = event.target.innerHTML.match(imgReg) ? event.target.innerHTML.match(imgReg) : [];
                  for (var i = 0; i < curImg.length; i++) {
                    for (var j = 0; j < img.length; j++) {
                      if (curImg[i] !== img[j]) {
                        imgArr.push(img[j]);
                      }
                    }
                  }
                  removeImg = img.length == 1 ? img : imgArr;
                  var curSrc = removeImg[0].match(srcReg)[1];
                  if (curSrc.indexOf('?') !== -1) {
                    var url = curSrc.replace(/^.*?\:\/\/[^\/]+/, '').slice(1);
                    var path = url.slice(0, url.indexOf('?'));
                    // 进行文件的删除
                    yufp.service.request({
                      url: backend.fileService + '/api/file/provider/deletericheditfile',
                      method: 'post',
                      data: JSON.stringify({
                        filePath: path
                      }),
                      callback: function (code, message, res) {
                        if (res != null && res) {
                          _this.$message(_this.$t('widgets.EITinymceX_msg_002') + '!', _this.$t('widgets.msg_title'));
                          yufp.logger.info(_this.$t('widgets.EITinymceX_msg_002'));
                        }
                      }
                    });
                  }
                }
              }
            });
          },
          setup: function (editor) {
            editor.addButton('h2', {
              title: _this.$t('widgets.EITinymceX_msg_003'),
              text: _this.$t('widgets.EITinymceX_msg_003'),
              onclick: function () {
                editor.execCommand('mceToggleFormat', false, 'h2');
              },
              onPostRender: function () {
                var btn = this;
                editor.on('init', function () {
                  editor.formatter.formatChanged('h2', function (state) {
                    btn.active(state);
                  });
                });
              }
            });
            editor.addButton('p', {
              title: _this.$t('widgets.EITinymceX_msg_004'),
              text: _this.$t('widgets.EITinymceX_msg_004'),
              onclick: function () {
                editor.execCommand('mceToggleFormat', false, 'p');
              },
              onPostRender: function () {
                var btn = this;
                editor.on('init', function () {
                  editor.formatter.formatChanged('p', function (state) {
                    btn.active(state);
                  });
                });
              }
            });
          }
        });
      }
    },
    watch: {
      value: function (val) {
        if (!this.hasChange && this.hasInit) {
          this.$nextTick(function () {
            window.tinymce.get(this.id).setContent(val);
          });
        }
      }

    },
    mounted: function () {
      this.init();
    },
    destroyed: function () {
      if (window.tinymce.get(this.id)) {
        window.tinymce.get(this.id).destroy();
      }
    }
  });
}(Vue, yufp.$, 'el-tinymce-x'));